<template>
	<div>
		<div v-if="data && data.type === 'face'">
			<div class="item" v-show="data && data.Name">{{ $t('user.name') }}:{{ data.Name }}</div>
			<div class="item" v-show="data && data.Gender">{{ $t('user.sex') }}:{{ data.Gender }}</div>
			<div class="item" v-show="data && data.Nationality">{{ $t('user.nationality') }}:{{ data.Nationality }}</div>
			<div class="item" v-show="data && data.Address">{{ $t('user.address') }}:{{ data.Address }}</div>
			<div class="item" v-show="data && data.IDNumber">{{ $t('user.num') }}:{{ data.IDNumber }}</div>
			<div class="item" v-show="data && data.BirthDate">{{ $t('user.birth') }}:{{ data.BirthDate }}</div>
		</div>
		<div v-if="data && data.type === 'back'">
			<div class="item" v-show="data && data.Issue">{{ $t('user.issue') }}:{{ data.Issue }}</div>
			<div class="item" v-show="data && data.StartDate">{{ $t('user.startDate') }}:{{ data.StartDate }}</div>
			<div class="item" v-show="data && data.EndDate">{{ $t('user.endDate') }}:{{ data.EndDate }}</div>
		</div>
		<div v-if="!data">
			<div class="item">{{ $t('pic.failed') }}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'OCR',
	props: {
		data: {
			type: Object
		}
	}
};
</script>

<style scoped>
.item {
	width: 90%;
	height: 20px;
	line-height: 20px;
	margin-top: 10px;
}
</style>
